<template>
  <div>
    <div class="list-text" style>
      <div class="top">
<!--        <img-->
<!--          src="../../../../static/images/dangjian/mall/step_active.png"-->
<!--          alt-->
<!--        />-->
<!--        <p class="info">兑换成功！</p>-->
<!--          <img :src="orderInfo.albumPics" alt />-->
        <swiper ref="swiper" :key="refreshKey" :options="swiperOption" v-if="albumPicList.length>0">
          <swiper-slide  class="swiper-slide" v-for="(item,index) in albumPicList" :key="index">
            <div  class="slide-img">
              <img :src="item"  alt/>
            </div>
          </swiper-slide>
        </swiper>
        <div class="copy" v-show="orderInfo.categoryKey !='BDT_KEY' && query.status == 2 && type != 2">
          <input id="copyInput" type="text" style="opacity: 0" />
          <div class="qm">券码</div>
<!--          <img  @click="showImagePreview()" id="barcode" />-->
          <img id="barcode" />
<!--          <span class="num pdv-2 pdh-4">{{ orderInfo.cuponKey }}</span>-->
<!--          <span class="copyBut" @click="copy(orderInfo.cuponKey)">复制券码</span>-->
        </div>
      </div>
      <div class="bottom">
        <div class="item one">
          使用积分
          <span class="jf">
            {{ orderInfo.totalPoint }}
            <span class="text">积分</span>
          </span>
        </div>
        <div class="item two">
          兑换时间
          <span class="sj">{{getTime(orderInfo.createTime) }}</span>
        </div>
        <div v-if="query.status == 2 && orderInfo.categoryKey =='BDT_KEY'" class="item two">
         使用时间
          <span class="sj">{{ getTime(orderInfo.useDate) }}</span>
        </div>
        <div v-if="query.status == 2 && orderInfo.categoryKey =='BDT_KEY'" class="item two">
          补答题日期
          <span class="sj">{{ getDay(orderInfo.bdtData) }}</span>
        </div>
      </div>

      <div class="pdv-6 pdh-6">
        <!-- <div class="default-block-btn" v-preventReClick="1000">立即补答</div> -->
        <div
          v-if="query.status == 1 && type == 1"
          class="default-block-btn"
          v-preventReClick="1000"
          @click="shiyong($event)"
        >
          立即使用
        </div>
        <div
          v-if="query.status == 1 && type == 2 && jlyyTime > 0 && step !== 3"
          class="default-block-btn"
          v-preventReClick="1000"
          @click="shiyong($event)"
        >
          立即使用
        </div>
        <div
          v-if="query.status == 2 || step == 3"
          class="default-block-btn default-disabled"
          v-preventReClick="1000"
        >
          已使用
        </div>
        <div
          v-if="query.status == 9 || (jlyyTime && jlyyTime <= 0)"
          class="default-block-btn default-disabled"
          v-preventReClick="1000"
        >
          已过期
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tools from "@/utils/tools";
import moment from "moment";
import JsBarcode from 'jsbarcode';
export default {
  props: ["type", "jlyyTime","step"],
  data() {
    return {
      query: this.$route.query, //从兑换记录进来带参数
      userInfo: {},
      orderInfo: '',
      orderDetail: '',
      // productDetail: JSON.parse(sessionStorage.getItem("productDetail")), //商品详细信息
      title: "订单详情",
      albumPic:'',//图片路径
      albumPicList:'',//图片集合
      refreshKey: '',
      swiperOption: {
        slidesPerView: 1,
        spaceBetween: 0,
        loopFillGroupWithBlank: true,
        //显示分页
        pagination: {
          el: '.swiper-pagination'
        },
        //设置点击箭头
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        loop: false,
        //自动轮播
        autoplay:false,
      }
    };
  },
  created() {
    this.orderInfo = JSON.parse(sessionStorage.getItem("orderInfo")) //订单信息
    this.orderDetail = JSON.parse(sessionStorage.getItem("orderDetail")) //订单详细信息(包含预约记录)
    this.userInfo = this.$localStorage.get("userInfo");
    this.getAlbumPics()
  },
  mounted() {
    let cuponKey =  this.orderInfo.cuponKey
    JsBarcode('#barcode', cuponKey, {
      format: 'CODE128',
      lineColor: '#000',
      // background: '#EBEEF5',
      // fontOptions:"bold italic",//使文字加粗体或变斜体
      fontSize:12,//设置文本的大小
      width: 1.5,
      height: 25,
      displayValue: true
    })
  },
  methods: {
    getAlbumPics(){
      this.albumPicList = this.orderInfo.albumPics.split(',')
    },
    copy(data) {
      let oInput = document.getElementById("copyInput");
      oInput.value = data;
      oInput.select(); // 选择对象;
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.tools.tip("复制成功");
    },
    //立即使用
    shiyong(e) {
      if (e.target.disabled) {
        return false;
      }
      if(this.orderInfo.categoryKey === 'BDT_KEY'){
        console.log(this.orderInfo.categoryKey);
        this.$router.replace({
          path: "/dateDetail",
          query: { orderId: this.orderInfo.id },
        });
        return
      }
      var data = {
        description: "",
        orderId: this.orderInfo.id,
        userId: this.userInfo.id,
      };
      this.$createDialog({
        type: 'confirm',
        icon: '',
        title: '温馨提示',
        content: '本券一经使用无法退换，请在指定门店，向收银员当面出示点击确认，请勿提前点击使用！',
        confirmBtn: {
          text: '取消',
          active: false,
          disabled: false,
          href: 'javascript:;'
        },
        cancelBtn: {
          text: '确认',
          active: true,
          disabled: false,
          href: 'javascript:;'
        },
        onCancel: () => {
          this.fetchService.mallOrderCost(data).then((res) => {
            this.query.status = 2; //已使用
            if (res.code !== 0) {
              return tools.tip(res.message);
            }
            tools.tip("使用成功");
            setTimeout(() => {
              // tools.back();
            }, 200);
          });
        }
      }).show()
    },
    showImagePreview() {

      let imgs = [''];
      this.$createImagePreview(
        {
          initialIndex: 0,
          imgs: imgs,
        },
        (h) => {
          return h(
            "div",
            {
              class: {
                "image-preview-custom-header": false,
              },
              slot: "header",
            },
            ""
          );
        }
      ).show();
    },
    getTime(createTime){
      return moment(createTime).format("YYYY-MM-DD HH:mm:ss")
    },
    getDay (createTime) {
      return moment(createTime).format('YYYY年MM月DD日')
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/common/stylus/moon.scss";
.top {
  background: #ffffff;
  font-size: $tipFontSize;
  text-align: center;
  padding: 40px 7px 40px;
  >img{
    width: 90%;
    margin: 0 auto;
  }
  .info {
    font-size: $titleFontSize;
    line-height: 48px;
    color: #343434;
  }
  .copy {
    font-size: $titleFontSize;
    text-align: left;
    color: #000000;
    padding: 0 0.1rem 0;
    .qm{
      font-size: 0.4rem;
      height: 1rem;
      width: 10%;
      float: left;
      line-height: 1rem;
      margin-top: 4%;
    }
    >img{
      width: 90%;
    }
    .num {
      color: #000000;
      width: 427px;
      line-height: 56px;
      font-size: $tipFontSize;
      height: 56px;
      background: #f5f5f5;
      border-radius: 4px;
    }
    .copyBut {
      font-weight: inherit;
      font-size: $tipFontSize;
      color: #2aab0e;
      line-height: 18px;
      padding: 5px 10px;
      border: 1px solid #2aab0e;
      border-radius: 10px;
      float: right;
      position: relative;
      top: 0.15rem;
      cursor: pointer;
    }
  }
}
.bottom {
  background: #ffffff;
  margin: 20px 0;
  font-size: $tipFontSize;
  .item {
    padding: 0 0.4rem;
    line-height: 90px;
    color: #000000;
  }
  .one {
    font-size: $titleFontSize;
    border-bottom: 1px solid #e5e5e5;
    .left{
      margin-left: 10%;
    }
    .jf {
      color: #e20002;
      line-height: 90px;
      float: right;
    }
  }
  .two {
    border-bottom: 1px solid #e5e5e5;
    font-size: $titleFontSize;
    .sj {
      color: #343434;
      line-height: 90px;
      float: right;
    }
  }
}
  .default-block-btn{
    font-size: 18PX;
  }
.slide-img{
  img {
    width: 100%;
    height: auto;
  }
}
</style>
